import 'package:flutter/material.dart';
import 'package:macnov/common/indicator.dart';
import 'package:macnov/models/budget.dart';
import 'package:macnov/role_owner/budget/components/budget_del_panel.dart';
import 'package:macnov/role_owner/budget/overview.dart';
import 'package:macnov/role_owner/budget/people.dart';
import 'package:macnov/stores/budget.dart';
import 'package:macnov/stores/transaction.dart';
import 'package:macnov/utils/colorUtil.dart';

class HeaderItemBean {
  final String labelTitle;
  HeaderItemBean(this.labelTitle);
}

final List<HeaderItemBean> _allPages = <HeaderItemBean>[
  new HeaderItemBean("overview"),
  new HeaderItemBean("people"),
];

class BudgetDetail extends StatefulWidget {
  @override
  _BudgetDetailState createState() => _BudgetDetailState();
}

class _BudgetDetailState extends State<BudgetDetail> {
  BudgetModel budgetModel;

  @override
  void initState() {
    super.initState();
    _loadtxn();
  }

  _loadtxn() {
    txnStore.loadTxn();
  }

  _loadBudget() {
    budgetStore.loadBudgets();
  }

  _goBack() {
    Navigator.pop(context);
  }

  _editBudget() {
    Navigator.pushNamed(context, '/owner/budget_edit', arguments: budgetModel);
  }

  _delBudget() {
    budgetStore.deleteBudget(budgetModel.budgetId, () {
      _goBack();
      _loadBudget();
    });
  }

  Widget _renderTabs() {
    return Material(
      color: Colors.white,
      child: new TabBar(
        isScrollable: true,
        indicator: YLStatisticsIndictor(),
        unselectedLabelColor: ColorsUtil.hexColor(0x8F909A),
        labelColor: ColorsUtil.hexColor(0x000000),
        tabs: _allPages
            .map((HeaderItemBean page) => new Tab(
                    child: Text(
                  page.labelTitle,
                )))
            .toList(),
      ),
    );
  }

  Widget _renderBody() {
    return TabBarView(children: <Widget>[
      new Overview(
        budgetModel: budgetModel,
      ),
      new PeopleList(),
    ]);
  }

  _showDelConfirm() {
    showModalBottomSheet(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20),
            topRight: Radius.circular(20),
          ),
        ),
        context: context,
        builder: (BuildContext context1) {
          return BudgetDelPanel(
            confirmCallback: _delBudget,
            cancelCallback: _goBack,
          );
        });
  }

  selectMenu(String value) {
    if ('del' == value) {
      _showDelConfirm();
    } else if ('edit' == value) {
      _editBudget();
    }
  }

  @override
  Widget build(BuildContext context) {
    budgetModel = ModalRoute.of(context).settings.arguments;
    return DefaultTabController(
        length: _allPages.length,
        child: Scaffold(
          backgroundColor: Colors.white,
          appBar: new AppBar(
            backgroundColor: Colors.white,
            brightness: Brightness.light,
            iconTheme: IconThemeData(color: Colors.black),
            elevation: 0.0,
            centerTitle: true,
            title: Text(
              'BUDGET DETAILS',
              style: TextStyle(color: Colors.black),
            ),
            actions: <Widget>[
              PopupMenuButton<String>(
                onSelected: selectMenu,
                itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
                  PopupMenuItem<String>(
                    value: 'edit',
                    child: ListTile(
                        title: Text(
                          'Edit budget',
                        ),
                        leading: Icon(Icons.edit)),
                  ),
                  PopupMenuDivider(),
                  PopupMenuItem<String>(
                    value: 'del',
                    child: ListTile(
                        title: Text(
                          'Delete budget',
                        ),
                        leading: Icon(Icons.delete)),
                  )
                ],
              )
            ],
          ),
          body: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.only(top: 20, bottom: 20, left: 10),
                    child: Text(
                      budgetModel.name,
                      style:
                          TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                    ),
                  )
                ],
              ),
              Container(
                color: Colors.white,
                child: _renderTabs(),
                height: 30,
                width: MediaQuery.of(context).size.width,
              ),
              Expanded(
                child: _renderBody(),
              )
            ],
          ),
        ));
  }
}
